<template>
  <div class="attrs-one-view">
    <div>arrtsOne 子组件:</div>
    <p class="msg">接收除了props声明外的所有绑定属性（class、style除外）</p>
     <p>$arrts：{{ $attrs }}</p> <!-- {  "age": "20",  "sex": "男" }  -->
    <div>prop->id: {{ id }}</div><!-- 10  -->
    <grandson
      v-bind="$attrs"
      name="Tony"
      age="32"
      v-on="$listeners"
      @getMessage="getMessage"
    ></grandson>
    <p class="msg1">接收除了props声明外的所有绑定属性（class、style除外）</p>
  </div>
</template>
<script>
import grandson from "./grandson.vue";
export default {
  components: {
    grandson,
  },
  props: {
    id: {
      type: String,
    },
  },
  data() {
    return {};
  },
  methods: {
    getMessage(val) {
      console.log("getMessage事件来源于child.vue" + val);
    },
  },
  created() {
    console.log(this.$listeners, '====listeners');
    this.$emit("getInfo", 'my name is child');
  },
};
</script>
<style lang="scss" scoped>
.attrs-one-view {
  .msg {
    padding: 0;
    margin: 2px;
    font-size: 14px;
    color: #dd862e;
  }
  .msg1 {
    padding: 0;
    margin: 2px;
    font-size: 14px;
    color: #2E74DD;
  }
}
</style>